<?php
// 引入导航配置文件
require_once 'nav_config.php';

// 获取当前页面ID
$current_p_id = isset($_GET['p_id']) ? $_GET['p_id'] : '';

// 获取当前页面配置（页面1）
$page_config = getPageConfig('1');
$project_name = $page_config['project_name'];
$navigation_data = $page_config['navigation_data'];

// 生成导航菜单HTML
$nav_li = generateNavigation($navigation_data, $current_p_id);
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左侧导航栏</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="http://36.133.110.23:8788/assets/theme222/css/page.css" />
		<link rel="stylesheet" type="text/css" href="http://36.133.110.23:8788/assets/theme111/css/left-side-menu.css">
		<link rel="stylesheet" type="text/css" href="http://36.133.110.23:8788/assets/theme111/font/iconfont.css">
		<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'>
		<link href="http://36.133.110.23:8788/assets/theme111/plugins/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="http://36.133.110.23:8788/assets/theme111/plugins/css/icons.min.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="page" id="app">
			<div class="nav-left" v-show="navLeftFlag" ref="navLeft">
				<div class="LogoName">
					
				</div>
				<div class="navDiv">
					<div class="navName">导航</div>
					<div class="nav-list">
						<ul>
							<?php echo $nav_li; ?>
						</ul>
					</div>
				</div>
			</div>
			<div class="nav-right" ref="navRight">
				<div class="nav-top" style="display: flex;">
					<button type="button" class="btn btn-primary btn-sm hiddenBtn" style="line-height: 10px;" @click="isShowLeft">
						<i class="fas fa-fw fa-laptop" style="font-size: 16px;"></i>
					</button>
					<!-- <button type="button" class="btn btn-primary btn-sm showBtn" style="line-height: 10px; display: none;" onclick="showNavRight">
						<i class="bx bx-expand" style="font-size: 16px;"></i>
					</button> -->
					<div class="LogoName right-header">
						<?php echo $project_name; ?>
					</div>
				</div>
				<div class="content-page" ref="cPage">
					<iframe src="http://36.133.110.23:8788/file/factory/17164419342450.html" width="100%" height="100%" frameborder="0" src="html/home.html"></iframe>
				</div>
			</div>
		</div>
		<script src="js/vue.min.js"></script>
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript">
			$(function() {
				let navflag = false;
				$('.nav-tab').click(function() {
					$(this).siblings().each(function() {
						$(this).removeClass('a_active');
						// $(this).removeClass('a_active');
						$(this).find('.nav-box').css('height', '0')
						//关闭右侧箭头
						if ($(this).attr('class').indexOf('nav-ul') != -1) {
							$(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
							$(this).find('.bx-chevron-right').css('transition', 'all .5s')
							$(this).removeClass('nav-show')
							// $(this).find('div').removeClass('nav-box')
						}
					})
					//当前选中
					$(this).addClass('a_active')
					$(this).find('.li-a').addClass('active')
					// 打开右侧箭头
					$(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
					$(this).find('.bx-chevron-right').css('transition', 'all .5s')
					$(this).addClass('nav-show')
					// $(this).find('div').addClass('nav-box')
				})
				/* 二级菜单a点击事件 */
				$(".li-a-a").click(function() {
					$(".li-a-a").each(function() {
						$(this).removeClass('active');
					})
					$(this).addClass('active');
				})
// 菜单高亮
				const paramsStr = window.location.search
				const params = new URLSearchParams(paramsStr)
				params.get('p_id') // list

				$('.nav-list a').each(function () {
					if($(this).attr('href') && $(this).attr('href').indexOf(params.get('p_id')) > -1){
						$(this).addClass('active').parent().siblings().find("a").removeClass('active')
						$(this).parents('li').addClass('a_active nav-show');
					}
				})
			})
			const vue = new Vue({
				el: '#app',
				data: {
					navLeftFlag: true
				},
				methods: {
					isShowLeft() {
						if (this.navLeftFlag ) {
							this.$refs.navRight.style.paddingLeft = '0px'
							this.$refs.cPage.style.left = '0px';
							this.navLeftFlag = false;
							// this.$refs.navLeft.style.width = '0px';
							// setTimeout(()=>{
							// 	this.navLeftFlag = false;
							// },200)
						} else {
							this.$refs.navRight.style.paddingLeft = '240px';
							this.$refs.cPage.style.left = '240px';
							this.navLeftFlag = true;
							// this.$refs.navLeft.style.width = '240px';
							// setTimeout(()=>{
							// 	this.navLeftFlag = true;
							// },200)
						}
					}
				}
			})
		</script>
	</body>
</html>
